<template>
<div>
  <div class="header">
    <div class="header-left">
      <div class="iconfont back-icon">&#xe624</div>
    </div>
    <div class="header-input">
      <span class="iconfont">&#xe632</span>
      输入城市
    </div>
    <router-link to="/city">
    <div class="header-right">
      {{this.city}}
      <span class="iconfont arrow-icon">&#xe64a</span>
    </div>
    </router-link>
  </div>
</div>
</template>

<script>
  import  { mapState } from 'vuex'
export  default {
  name:"HomeHeader",
  computed:{
    ...mapState(['city'])
  }
}
</script>


<style  scoped>
.header{
  line-height:.86rem;
  display: flex;
  color:#fff;
  background:#00bcd4
}
  .header .header-left{
    width:.64rem;
    float:left;

  }
.header .header-left .back-icon{
  text-align:center;
  font-size:.4rem;

}
  .header .header-input{
    flex:1;
    height:.64rem;
    line-height:.64rem;
    margin-top:.12rem;
    margin-left:.2rem;
    padding-left:.2rem;
    background:#fff;
    border-radius:.1rem;
    color:#ccc;
  }
  .header .header-right{
    min-width:1.04rem;
    padding:0 .1rem;
    float:right;
    text-align:center;
    color:#fff;
  }
.header .header-right .arrow-icon{
  margin-left:-.04rem;
  font-size:.24rem;
}
</style>
